<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Control Page</title>
    <!-- Link to Bootstrap CSS from CDN -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/control.css" rel="stylesheet">
</head>
<body>

    <!-- Toggle Button -->
    <div class="sidebar-toggle btn btn-secondary">
        <span id="toggle-sidebar">☰</span>
    </div>

    <div class="sidebar">
        <h4 class="text-center">导航</h4>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/control.html">Control</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/servo.html">Offset</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/config_exposure">Exposure Config</a>
            </li>
            <!-- Add more navigation items here -->
        </ul>
    </div>

    <div class="container mt-4">
        <h1>Control Page</h1>
        <div class="btn-group mb-4">
            <!-- Example Buttons --> 
            <div class="one">
                <div class="one-one">
                    <label for="cross-chair-off">关</label>
                    <label class="switch">
                        <input type="checkbox" id="slider-cross-chair">
                        <span class="slider"></span>
                    </label>
                    <label for="cross-chair-on">开</label>
                </div>
                <button class="btn btn-primary" onclick="displayCrossChair()">十字显示</button>
            </div>

            <div class="one">
                <div class="one-one">
                    <label for="cross-chair-off">关</label>
                    <label class="switch">
                        <input type="checkbox" id="slider-code">
                        <span class="slider"></span>
                    </label>
                    <label for="cross-chair-on">开</label>
                </div>
                <button class="btn btn-primary" onclick="displayCode()">字符显示</button>
            </div>
            <div class="one">
                <div class="one-one">
                    <label for="cross-chair-off">关</label>
                    <label class="switch">
                        <input type="checkbox" id="slider-port">
                        <span class="slider"></span>
                    </label>
                    <label for="cross-chair-on">开</label>
                </div>
                <button class="btn btn-primary" onclick="displayPort()">波门显示</button>
            </div>

            <div class="one">
                <div class="one-one">
                    <label for="cross-chair-off">搜索</label>
                    <label class="switch">
                        <input type="checkbox" id="slider-work-mode">
                        <span class="slider"></span>
                    </label>
                    <label for="cross-chair-on">正常</label>
                </div>
                <button class="btn btn-primary" onclick="workMode()">工作模式</button>
            </div>
            <div class="one">
                <div class="one-one">
                    <label for="cross-chair-off">手动</label>
                    <label class="switch">
                        <input type="checkbox" id="slider-exp-mode">
                        <span class="slider"></span>
                    </label>
                    <label for="cross-chair-on">自动</label>
                </div>
                <button class="btn btn-primary" onclick="expMode()">相机曝光模式</button>
            </div>
        </div>
        <div class="btn-group mb-4">
            <div class="one">
                <div class="one-one">
                <label for="float-input">x:</label>
                <input 
                    type="number" 
                    id="float-input-cross-chair-x" 
                    name="float-input" 
                    step="1" 
                    min="0" 
                    max="1024" 
                    placeholder="0 - 1024"
                    required
                >
                </div>
                <div class="one-one">
                <label for="float-input">y:</label>
                <input 
                    type="number" 
                    id="float-input-cross-chair-y" 
                    name="float-input" 
                    step="1" 
                    min="0" 
                    max="1024" 
                    placeholder="0 - 1024"
                    required
                >
                </div>
                <button class="btn btn-primary" onclick="updateCrossChair()">十字线校准</button>
            </div>
            <div class="one">
                <div class="one-one">
                <label for="float-input">x:</label>
                <input 
                    type="number" 
                    id="float-input-click-x" 
                    name="float-input" 
                    step="1" 
                    min="0" 
                    max="1024" 
                    placeholder="0 - 1024"
                    required
                >
                </div>
                <div class="one-one">
                <label for="float-input">y:</label>
                <input 
                    type="number" 
                    id="float-input-click-y" 
                    name="float-input" 
                    step="1" 
                    min="0" 
                    max="1024" 
                    placeholder="0 - 1024"
                    required
                >
                </div>
                <button class="btn btn-primary" onclick="updateClick()">点选</button>
            </div>
        </div>
        <div class="btn-group mb-4">
            <div class="one">
                <div class="one-one">
                <label for="float-input">曝光参数:</label>
                <input 
                    type="number" 
                    id="float-input-exp" 
                    name="float-input" 
                    step="1" 
                    min="24" 
                    max="65535" 
                    placeholder="24 - 65535"
                    required
                >
                </div>
                <button class="btn btn-primary" onclick="updateExp()">相机曝光</button>
            </div>
            <div class="one">
                <div class="one-one">
                <label for="float-input">增益参数:</label>
                <input 
                    type="number" 
                    id="float-input-gain" 
                    name="float-input" 
                    step="1" 
                    min="33" 
                    max="512" 
                    placeholder="33 - 512"
                    required
                >
                </div>
                <button class="btn btn-primary" onclick="updateGain()">相机增益</button>
            </div>
        </div>
        <div class="btn-group mb-4">
            <div class="one">
                <button class="btn btn-primary" onclick="sendData('button1')">自检</button>
            </div>
            <div class="one">
                <button class="btn btn-primary" onclick="sendData('button2')">复位</button>
            </div>
            <div class="one">
                <button class="btn btn-primary" onclick="sendData('button3')">重新捕获</button>
            </div>
            <!-- Add more buttons as needed -->
        </div>
        <div class="btn-group mb-4">
            <div class="one">
                    <div class="one-one">
                    <label for="float-input">x:</label>
                    <input 
                        type="number" 
                        id="float-input-rect-x" 
                        name="float-input" 
                        step="1" 
                        min="0" 
                        max="1024" 
                        placeholder="0 - 1024"
                        required
                    >
                    </div>
                    <div class="one-one">
                    <label for="float-input">y:</label>
                    <input 
                        type="number" 
                        id="float-input-rect-y" 
                        name="float-input" 
                        step="1" 
                        min="0" 
                        max="1024" 
                        placeholder="0 - 1024"
                        required
                    >
                    </div>
                    <div class="one-one">
                        <label for="float-input">width:</label>
                        <input 
                            type="number" 
                            id="float-input-rect-width" 
                            name="float-input" 
                            step="1" 
                            min="0" 
                            max="100" 
                            placeholder="0 - 100"
                            required
                        >
                    </div>
                    <div class="one-one">
                        <label for="float-input">height:</label>
                        <input 
                            type="number" 
                            id="float-input-rect-height" 
                            name="float-input" 
                            step="1" 
                            min="0" 
                            max="100" 
                            placeholder="0 - 100"
                            required
                        >
                    </div>
                    <button class="btn btn-primary" onclick="updateRect()">框选</button>
            </div>
        </div>
        <div class="udp_listen">
            <div class="udp_form">
                <form action="{{ url_for('start_udp_listener') }}" method="get">
                    <button type="submit">Start UDP Listener</button>
                </form>
            </div> 
            <div class="udp_form">
                <form action="{{ url_for('stop_udp_listener') }}" method="get">
                    <button type="submit">Stop UDP Listener</button>
                </form>
            </div>
            <div class="text">
                <div id="output"></div>
            </div>
        </div>
        <div  class="download">
            <button id="downloadBtn">下载文本</button>
        </div>
	<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/control.js') }}"></script>
    <script>
        document.getElementById('toggle-sidebar').addEventListener('click', function() {
        var sidebar = document.querySelector('.sidebar');
        var mainContent = document.querySelector('.main-content');
        sidebar.classList.toggle('show');
        mainContent.classList.toggle('shifted');
    });
    </script>

    <script>
    function fetchData() {
        fetch('/get_udp_data')
            .then(response => response.json())
            .then(data => {
                const output = document.getElementById('output');
                // 获取当前文本内容，并拆分为数组
                let currentMessages = output.innerHTML.split('\n').filter(line => line);
                
                // 将新数据添加到当前消息数组
                currentMessages = currentMessages.concat(data);
                
                // 保持最多1000条消息
                if (currentMessages.length > 1000) {
                    currentMessages = currentMessages.slice(currentMessages.length - 1000);
                }

                // 更新输出内容
                output.innerHTML = currentMessages.join('\n');
                output.scrollTop = output.scrollHeight; // 自动滚动到最新消息
            });
        }
        setInterval(fetchData, 1000); // 每秒获取一次数据
    </script>

    <script>
        document.getElementById('downloadBtn').addEventListener('click', function() {
            // 获取文本内容
            const textContent = document.getElementById('output').textContent;

            // 创建一个 Blob 对象
            const blob = new Blob([textContent], { type: 'text/plain' });

            // 创建一个 URL 对象
            const url = URL.createObjectURL(blob);

            // 创建一个临时的链接元素
            const a = document.createElement('a');
            a.href = url;
            a.download = 'download.txt'; // 设置下载的文件名

            // 触发下载
            document.body.appendChild(a);
            a.click();

            // 清理
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    </script>
    
</body>
</html>
